<template>
	<view>
		<view style="width: 40rpx;height: 40rpx;position: fixed;right: 16rpx;top: 16rpx;">
			<image src="../../static/image/setting.png" style="width: 46rpx;height: 46rpx;"></image>
		</view>
		<view class="top-userinfo" @click="go_login">
			<label>
				<view class="icon-wrap">
					<image :src=portrait style="width: 140rpx;height: 140rpx;"></image>
				</view>
				<view style="width: 100rpx;text-align: center;margin: auto;margin-top: -100rpx;color: white;">
					{{username}}
				</view>
			</label>
		</view>

		<view>
			<view style="width: 100%;">
				<uni-list>
					<uni-list-item :title="titles[0]" show-arrow show-badge="true" badge-text="12" @click='listSelected(0)' clickable/>
					
					<view>
						<uni-grid :options="itemType" :show-border="false" :column-num="5" @click='func'/>
					</view>
					
					<uni-list-item @click='listSelected(1)' :title="titles[1]" show-arrow clickable>
					</uni-list-item>
					<uni-list-item @click='listSelected(2)' :title="titles[2]" show-arrow clickable>
					</uni-list-item>
					<uni-list-item @click='listSelected(3)' :title="titles[3]" show-arrow clickable>
					</uni-list-item>
					<uni-list-item @click='listSelected(4)' :title="titles[4]" show-arrow clickable>
					</uni-list-item>
					<uni-list-item @click='listSelected(5)' :title="titles[5]" show-arrow clickable>
					</uni-list-item>
				</uni-list>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data(){
			return {
				portrait: '../../static/image/login.png' ,
				username: '登录',
				
				titles: [ 
						'我的票券',
						'线上活动',
						'我的会员',
						'我的优惠卷',
						'发布活动',
						'我发布的',
						'我的收藏',
						'邀请好友',
						'更多服务',
						],
				
				itemType: [
					{
						text:'待参加',
						image:'../../static/icon-button/heme-top1.png',
						type:10
					},
						{
						text:'待审核',
						image:'../../static/icon-button/heme-top2.png',
						type:11
					},
						{
						text:'待支付',
						image:'../../static/icon-button/heme-top3.png',
						type:12
					},
						{
						text:'退票',
						image:'../../static/icon-button/heme-top4.png',
						type:13
					},
						{
						text:'待评价',
						image:'../../static/icon-button/home-top5.png',
						type:14,
						invaild:1
					}
				],
				
			}
		},
		methods: {
				go_login: function(e) {
					console.log(e)
					uni.navigateTo({
						url: '../login/index'
					})
				},
				
		        listSelected: function(e) {
		        	console.log(e)
		        },
				
				func: function(e) {
					let type = e.index
					console.log(type)
				}
				
		},
		onShow() {
			let s = localStorage.getItem("portrait")
			let s2 = localStorage.getItem("username")
			localStorage.clear()
			if(s) {
				this.portrait = s;
				this.username = s2;
			}
		}
	}
</script>

<style lang="scss">
	.top-userinfo{
		border: #33bcff solid 0.0001rpx;
		height: 360rpx;
		background-color: #33bcff;
	}
	.icon-wrap{
		// border: #1AAD19 solid 1rpx;
		height: 140rpx;
		width: 140rpx;
		border-radius: 3em;
		background-color: #EEEEEE;
		margin: 100rpx auto;
		overflow: hidden;
	}
</style>
